<template>
    <div class="wrapper">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入 活动名称 或 活动类型 或 发起者 进行搜索"/>
        <el-table
        :data="filteredTableData.filter(data => !search 
        || data.title.toLowerCase().includes(search.toLowerCase()) 
        || data.tag.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100vw;"
        :default-sort = "{prop: 'endTime', order: 'descending'}"
        >
        <el-table-column
            header-align="center"
            type="expand"
            width="15" 
            >
            <template slot-scope="props">
            <el-form label-position="left" inline class="elementui-table-expand">
                <el-form-item label="活动名称">
                    <span>{{ props.row.title }}</span>
                </el-form-item>

                <el-form-item label="联系方式">
                    <span>{{ props.row.contact }}</span>
                </el-form-item>

                <el-form-item label="开始时间">
                    <span>{{ props.row.beginTime }}</span>
                </el-form-item>

                <el-form-item label="结束时间">
                    <span>{{ props.row.endTime }}</span>
                </el-form-item>

                <el-form-item label="活动地点">
                    <span>{{ props.row.location }}</span>
                </el-form-item>

                <el-form-item label="创建者ID">
                    <span>{{ props.row.uid }}</span>
                </el-form-item>

                <el-form-item label="活动简介" border>
                    <span>{{ props.row.introduce }}</span>
                </el-form-item>
            </el-form>
            </template>
        </el-table-column>

        <el-table-column
            prop="endTime"
            label="结束日期"
            align="center"
            sortable
        >
            <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="活动名称"
            >
        </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="danger"
                    @click="delActive(scope.row.aid, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import token from '@/apis/refresh_token'
import active from '@/apis/active_operations'
  export default {
    name:'MyPublish',
    components:{},
    props:{
        tableData: Array,
        filters: Array
    },
    data(){
      return {
        search: '',
        localTableData: this.tableData,
        btnStyle: {
            '聚餐':'primary',
            '学习':'success',
            '出游':'info',
            '其他':'warning',
        }
      }
    },
    created(){},
    mounted(){
        token.request()
    },
    activated(){},
    updated(){},
    methods:{
        resetDateFilter () {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter () {
            this.$refs.filterTable.clearFilter();
        },
        formatter (row, column) {
            return row.address;
        },
        filterTag (value, row) {
            return row.tag === value;
        },
        filterHandler (value, row, column) {
            const property = column['property']
            return row[property] === value;
        },
        delActive (aid, index) {
            let that = this
            token.request().then(res => {
                this.$confirm('此操作将解散该活动, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    active.deleteActive(aid, (data) => {
                        if (data.code != 200) {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            })
                        } else {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.localTableData.splice(index, 1)
                    }
                })}).catch(err => {
                    this.$message({
                        message: '已取消删除',
                        type: 'warning'
                    }) 
                })   
            })
        }
    },
    computed:{
        // 使用这个计算值之前，先在mouted里执行token.request做一次token刷新
        // 避免使用
        filteredTableData () {
            let filteredDataArr = []
            this.localTableData.forEach( one => {
                if (one.uid == localStorage.getItem('uid')) { // 比对自己的uid，如果是自己的话，那么放到数组里面返回
                    filteredDataArr.push(one)
                    return true    
                }}
            )
            return filteredDataArr
        }
    },
    watch:{},
  }
</script>
<style scoped>
    .elementui-table-expand .el-form-item{
        min-width: 45%;
        max-width: 45%;
        overflow: hidden;
    }
    
</style>